<template>
  <div class="crumb">
    <!-- 父传子 navs -->
    <span v-for="(item, index) in navs" :key="index">
      <!-- 遍历数据最后一个高亮颜色为#333 其他为#999 -->
      <span :style="{ color: index == navs.length - 1 ? '#333' : '#999999' }">
        {{ item.name }}
      </span>
      <!-- 最后一个/不限时，索引长度index小于navs数组长度减1，就是true，就显示，当index为最后一个，index就登录navs.length - 1，就是false-->
      <i v-show="index < navs.length - 1">/</i>
    </span>
  </div>
</template>

<script>
export default {
  props: ["navs"],
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.crumb {
  margin: 5px 0;
  i {
    padding: 0 1px;
  }
}
</style>
